<template lang="html">
  <div>
    <homeHeader :city='city'></homeHeader>
    <homeSwiper :swiperList='swiperList'></homeSwiper>
    <homeIcons :iconList='iconList'></homeIcons>
    <homeRecommend :recommendList='recommendList'></homeRecommend>
    <homeWeekend :weekendList='weekendList'></homeWeekend>
  </div>
</template>

<script>
import axios from 'axios'
import homeHeader from './components/Header'
import homeSwiper from './components/Swiper'
import homeIcons from './components/Icons'
import homeRecommend from './components/Recommend'
import homeWeekend from './components/Weekend'
export default {
  name: 'Home',
  components: { homeHeader, homeSwiper, homeIcons, homeRecommend, homeWeekend },
  mounted () {
    this.getHomeInfo()
  },
  data: function () {
    return {
      city: '',
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: []
    }
  },
  methods: {
    getHomeInfo () {
      axios.get('/api/index.json').then(res => {
        if (res.status === 200) {
          this.city = res.data.data.city
          this.swiperList = res.data.data.swiperList
          this.iconList = res.data.data.iconList
          this.recommendList = res.data.data.recommendList
          this.weekendList = res.data.data.weekendList
        } else {
          console.info(res.message)
        }
      })
    }
  }
}
</script>

<style lang="css">
</style>
